<template>
    <div class='b'>
        <h1>进销售后台登录</h1>
        <el-form :model="form" label-width="auto">
            <el-form-item label="请输入账号">
                <el-input type="text" v-model="form.username" placeholder="请输入账号" label-width="100px" />
            </el-form-item>

            <el-form-item label="请输入密码">
                <el-input type="password" v-model="form.password" placeholder="请输入密码" />
            </el-form-item>

            <el-form-item label="记住密码">
                <el-switch v-model="rememberMe" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
            </el-form-item>

            <el-form-item>
                <el-button class="login-button" type="primary" @click="login1">登入</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { login } from '../api/ghs/ghsApi';
import { reactive } from 'vue';

export default {
    data() {
        return {
            form: reactive({
                username: '',
                password: '',
            }),
            rememberMe: false,
        };
    },
    methods: {
        login1() {
            if (!this.form.username || !this.form.password) {
                alert('请输入账号和密码');
                return;
            }

            login({
                username: this.form.username,
                password: this.form.password
            })
                .then(res => {
                    console.log(res);
                    if (res.code === 200) {
                        alert(res.message);
                        this.$router.push('/select');
                    }
                })
                .catch(err => {
                    console.error(err);
                    alert('登录失败，请检查账号和密码');
                });

            if (this.rememberMe) {
                localStorage.setItem('username', this.form.username);
                localStorage.setItem('password', this.form.password);
            }
            console.log(this.form.username, this.form.password);
        },
    },
    created() {
        const savedUsername = localStorage.getItem('username');
        const savedPassword = localStorage.getItem('password');
        if (savedUsername) {
            this.form.username = savedUsername;
        }
        if (savedPassword) {
            this.form.password = savedPassword;
        }
    },
}; 
</script>

<style>
.b {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100vh;
    margin: 0;
}

.login-button {
    padding: 12px 24px;
    /* 增加上下左右的内边距 */
    font-size: 18px;
    /* 增加字体大小 */
    width: 200px;
    /* 设置按钮宽度 */
    margin: 0 auto;
    /* 水平居中 */
}
</style>
